// 导入了Vue
import Vue from 'vue'
// 导入Vue-Router
import VueRouter from 'vue-router'

// 导入了要显示的组件
import HomeView from '../views/HomeView.vue'

// 给Vue安装路由 --- 让Vue多了路由的功能
Vue.use(VueRouter)


// 制定路由规则
// 也就是指定用什么样的路径去访问哪个组件
// const routes = [
//   {
//     // 路径为/（路径后面什么都不加）
//     // 就切换到HomeView这个组件
//     path: '/',
//     // 只是给这个路由起一个名字
//     name: 'home',
//     component: HomeView
//   },
//   {
//     // 用`/about`路径就切换到AboutView这个组件
//     path: '/about',
//     name: 'about',
//     // route level code-splitting
//     // this generates a separate chunk (about.[hash].js) for this route
//     // which is lazy-loaded when the route is visited.
//     component: () => import('../views/AboutView.vue')
//   }
// ]

// 实例化路由对象，而且把上面定义的规则用到这个路由身上
const router = new VueRouter({
  // routes: routes  // 完整写法
  routes: [
    {
      // 路径为/（路径后面什么都不加）
      // 就切换到HomeView这个组件
      path: '/home',
      // 只是给这个路由起一个名字
      name: 'home',
      component: HomeView
    },
    {
      // 用`/about`路径就切换到AboutView这个组件
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ],
  // 切换模式为history
  // mode: 'history' // 默认是hash
})

// 暴露路由对象出去
export default router
